<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 13px 0 0 0px;width: 10%"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 80%">账号与安全</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 13px 0 0 0px;width: 10%"></div>
    </div>
    <div style="margin-top: 5px;color: darkgray;font-size: 15px;display: flex;margin-left: 10px">账号设置</div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 10px" @click="captchaPhone">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 0px;width: 60%;display: flex;padding-left: 10px">手机号</div>
      <div style="font-family: 'Avenir';font-size: 15px;margin: 16px 0 0 0px;color: darkgray;width: 30%"> {{ this.xphone }} </div>
      <div style="font-family: 'Avenir';font-size: 18px;margin: 13.5px 0 0 0px;color: darkgray;width: 10%">  <van-icon name="arrow" /> </div>
    </div>
    <div style="margin-top: 5px;color: darkgray;font-size: 15px;display: flex;margin-left: 10px">安全设置</div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 10px" @click="captchaPassword">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 10px">设置登录密码</div>
    </div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1.5px" @click="captchaPay">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 0px;width: 80%;display: flex;padding-left: 10px">设置支付密码</div>
    </div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1.5px" @click="logout">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 0px;width: 35%;display: flex;padding-left: 10px">注销账号</div>
      <div style="font-family: 'Avenir';font-size: 15px;margin: 16px 0 0 0px;color: darkgray;width: 55%"> 注销后无法恢复，请进很操作 </div>
      <div style="font-family: 'Avenir';font-size: 18px;margin: 13.5px 0 0 0px;color: darkgray;width: 10%">  <van-icon name="arrow" /> </div>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      xphone:'',
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.phoneXing();
  },
  methods: {
    phoneXing(){
      this.xphone=this.user.phone.substring(0,3)+'****'+this.user.phone.substring(7,11);
    },
    fanhui() {
      this.$router.push('/setUp')
    },
    captchaPhone(){
      this.$router.push({path:'/captcha', query: {name: '电话'}})
    },
    captchaPassword(){
      this.$router.push({path:'/captcha', query: {name: '登录密码'}})
    },
    captchaPay(){
      this.$router.push({path:'/captcha', query: {name: '支付密码'}})
    },
    logout(){
        this.$router.push('/logout')
    }
  }
}

</script>

<style scoped>

</style>
